<template>
  <div
    :class="[
      'rounded-full overflow-hidden flex items-center justify-center bg-gradient-ai text-white select-none',
      sizeClass,
      containerClass,
    ]"
    :title="alt || initials"
  >
    <img
      v-if="src"
      :src="src"
      :alt="alt || initials"
      class="w-full h-full object-cover"
      @error="handleError"
    />
    <span v-else class="font-bold" :class="textSizeClass">{{ initials }}</span>
  </div>
  
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

interface Props {
  src?: string
  name?: string
  alt?: string
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
  class?: string
}

const props = defineProps<Props>()

const hasError = ref(false)

const displayName = computed(() => props.name || '')
const initials = computed(() => displayName.value?.[0]?.toUpperCase() || 'U')

const sizeClass = computed(() => {
  switch (props.size) {
    case 'xs': return 'w-6 h-6'
    case 'sm': return 'w-8 h-8'
    case 'md': return 'w-10 h-10'
    case 'lg': return 'w-16 h-16'
    case 'xl': return 'w-20 h-20'
    default: return 'w-10 h-10'
  }
})

const textSizeClass = computed(() => {
  switch (props.size) {
    case 'xs': return 'text-[10px]'
    case 'sm': return 'text-xs'
    case 'md': return 'text-sm'
    case 'lg': return 'text-2xl'
    case 'xl': return 'text-3xl'
    default: return 'text-sm'
  }
})

const containerClass = computed(() => props.class || '')

const src = computed(() => (hasError.value ? '' : props.src))

const handleError = () => {
  hasError.value = true
}

watch(() => props.src, () => {
  hasError.value = false
})
</script>

<style scoped>
</style>

 
